Layui使用记录

2019.5.23 星期四 14:45

layui文档:https://www.layui.com/doc/element/layout.html

当当号后台审核

入手评测

1) 返璞归真,自己写的模块,可以按需引入。也可以全部引入。
2) UI样式不必修改,因为是给后台使用的。原有ui基本可以使用。
3) 动态(按需)引入,需要在layui.use()的回调中写js;有些模块涉及到样式,虽然模块在js中没有使用,但是需要声明模块引入,比如表单,上下拉等。
4) layui的模块无法全局引用,需要通过window传递;导致debug困难,所有js都在layui的回调中,控制台取不到debug对象。
5) 同理,layui外部的代码和layui里面的代码 通信(互相调用)费事。比如,样式在初始化渲染后,会把原先的dom隐藏掉,建立新的,如果通过js动态修改数据需要修改layui渲染的新dom,有时还需要进行re-redener或者reload.

网友讨论

包括作者(贤心),从某逼乎
layui另辟蹊径,专门给后端人员提供了一套简单好用的前端框架/ui/模板;
后端人员取到数据,直接可以渲染,一个表格或者表单提交数据。

总结

对于完全没有基础的后端人员,又没有特殊的需求,样式方便也没有太多修改。layui来说可以说很合适。
听说另一个extjs,界面样式老套(没有接触过,看样子,确实和现在的风格不符)

如果有前端,有特殊需求的话,还是交给前端去判断吧。前端专用框架bootstarp,jquery ui,vue,element-ui等,可以方便引入第三方插件,前端写起来也比较顺手,调试修改都比较快。
如果时间比较紧,又没有特殊需求,layui是完全可以接受的。毕竟’开箱即用‘。可以节省大量时间

layer

  1. 该组件比较常用,可以单独使用js,全局可以直接使用
  2. 不同类型弹窗,都有api直接方便操作,比如:layer.msg();layer.alert();layer.load(icon, options)
  3. 层级影响,如果不放到body外面位置会比较怪。可以取消遮罩层

    这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响

  4. content可以是 $(‘#id’), 该html中的内容页可以通过layui渲染。弹窗显示内容未layui渲染之后的
    ~~ date弹窗组件闪现问题也没那么明显~~
  5. layer loading是全页面遮罩的,不能设置某个div元素。
    需要借助插件 loading

15:58


2019.8.10 星期六 14:41

date

  1. 如果date是在一个layer中,需要设置触发条件为trigger:click。 否则 date组件不稳定

form

  1. 获取表单组件值的方式,在新版本才生效

    其中「取值」功能为 layui 2.5.5 开始新增

table

  1. 初始化,会把原先的表格隐藏掉。新建一个,导致js中动态添加进body的内容并不会显示在渲染后的表格中
  2. 默认排序方式,是根据td中html 排序的。
    也就是说td中的html,或者属性等都会内容会影响排序结果
    而且排序是默认的字符串排序方式,即: 1,11,14,2,3,4,42,5
    1)单独把排序数据放在一个display:none的标签中;2)重新渲染表格
  3. 如果自定义排序(不使用服务端排序) 打开表头默认给的 排序小箭头,会直接按照 小箭头 采用layui默认排序,而不是自定义
    方式:1)只能不设置小箭头的排序方式,只让它显示。然后通过js 控制className 为正确的样式
    虽然会报错:没有排序的field,不用搭理
    2) 不使用layui的小箭头,自己给表头上插入 小箭头。
    不合适,那干脆自己写table样式了   
    
    3) 去修改源码,或者 做纠正
  4. 导出xls数据,为当前表格展示的内容。即使是获取的所有数据(然后用自带分页展示),也是展示当前页
    可以用table.exportFile() 直接导出数据。
    $_Next: 但是,文件名 怎么命名啊??

插件

loading

knowledge is no pay,reward is kindness
0%